<template>
    <div>
        <Header v-if="showHeader" title="下属员工"></Header>
        <div ref="topWarp" class="top-warp">
            <SearchData
                :isDisabled="isDisabled" 
                :title="title" 
                @updateTitle="updateTitle" 
                :organizationNavsProps="organizationNavsProps"
                :organizationTree="organizationTree" 
                @organizationNavs="organizationNavs" 
                @searchData="searchData"
            ></SearchData>
            <div class="filter-tool">
                <div class="left-filter">
                    <van-dropdown-menu active-color="#02ccbd">
                        <van-dropdown-item v-model="filterValue" :options="filterOption" @change="changeItem" />
                    </van-dropdown-menu>
                </div>
                <p>当前考核时间</p>
                <div>
                    <SortData :sortToolsList="sortToolsList" :activeClass="activeClass" @sortTable="sortTable"></SortData>
                </div>
                
            </div>
        </div>
        <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="tableListMescroll" :up="mescrollUp" @init="mescrollInit">
            <div id="tableList">
                <!-- <TableList :tableList="tableList" fromPage='subordinatesDelay'></TableList> -->
                <li class="van_item" v-for="(item,index) in tableList" :key="index" @click="subordinatesInfo(item.staffer_id)">
                    <ul class="item_list">
                        <li class="item_list_item first_item_list_item">
                            <div class="item_user_info">
                                <img v-if="item.head_img" :src="item.head_img" alt="头像">
                                <img v-else :src="pic" alt="头像" />
                                <div>
                                    <span>{{item.staffer_name}}</span>
                                    <br />
                                    <span>{{item.job_name}}</span>
                                </div>
                            </div>
                        </li>
                        <li class="item_list_item" v-if="item.begin_date&&item.end_date">
                            <span>{{item.begin_date.slice(5)}}</span>至<span>{{item.end_date.slice(5)}}</span>
                        </li>
                        <li class="item_list_item" v-else>
                            <span>--</span>
                        </li>
                        <li class="item_list_item warning" v-if="item.score">{{item.score}}</li>
                        <li class="item_list_item warning" v-else>0</li>
                    </ul>
                </li>
            </div>
        </mescroll-vue>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import Header from "@/components/Header.vue";
import Loading from "@/components/Loading.vue";
import SearchData from "@/components/business/SearchData.vue";
import SortData from "@/components/SortData.vue"
import TableList from "@/components/business/TableList.vue";
import { staffersV3,organizations } from "@/request/api.js";
import { deepCopy } from "@/plugins/deepCopy.js";
export default {
    name:'Subordinates',
    data(){
        return {
            showLoading:false,
            pic:require('@/assets/images/morentouxiang.png'),
            showHeader:this.$store.state.showHeader,
            searchValue:'',
            order:'assessment_total_score',
            order_type:'desc',
            organize_id:'0',
            isDisabled:true,
            title:'组织',
            organizationTree:[],
            organizationNavsProps:[],
            activeClass:1,
            sortToolsList:[
                {text:'',isSort:false,order:'',orderSort:false},
                {text:'考核得分',isSort:true,order:'assessment_total_score',orderSort:false},
            ],
            mescroll: null,
            tableList:[],
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                auto:false,
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    limit: 10 // 每页数据的数量
                },
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'tableList', // 父布局的id;
                    tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
            filterValue:1,
            filterOption: [
                { text: '考核人员', value: 1 },
                { text: '预淘汰人员', value: 2 },
                { text: '淘汰人员', value: 3 },
            ],
        }
    },
    components:{
        MescrollVue,
        Header,
        SearchData,
        SortData,
        TableList,
        Loading,
    },
    activated() {
        // console.log(this.organizationNavsProps)
        let meta = this.$route.meta;
        if(meta.isFresh || !this.tableList.length){//允许刷新操作 或者 主页->列表页
            this.mescrollUp.page.num = 0;//将page更新为初始值
            meta.isFresh = false;
            this.title = '组织';
            this.searchValue = '';
            this.order_type = 'desc';
            this.organize_id = 0;
            this.filterValue = 1;
            this.mescroll.triggerDownScroll();//请求数据
            this.getO();
        }else {//详情页缓存，跳到之前的高度
            this.$nextTick(()=>{
                this.mescroll.scrollTo( meta.scrollTop, 10 );
            })
        }
    },
    mounted(){
        if (this.showHeader) {
            this.$refs.topWarp.style.top = 44 + 'px'
            this.$refs.tableListMescroll.$el.style.top = 132 + 'px'
        }
    },
    methods:{
        getO(){
            organizations({token:this.$store.state.token}).then(res=>{
                // console.log(res);
                let data = res.data.tree;
                // console.log(data)
                this.organizationTree = deepCopy(data);
                this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/name/g, 'label'));
                this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/id/g, 'value'));
                // console.log(this.organizationTree)
                this.isDisabled = false;
            }).catch(error=>{
                console.log(error)
            })
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // 联网加载数据
            staffersV3({
                staffer_id:this.$store.state.staffer_id,
                token:this.$store.state.token,
                staffer_name: this.searchValue,
                sort:this.order_type,
                organic_sonid:this.organize_id,
                status:this.filterValue,
                page:page.num,
                page_num:page.limit
            }).then(res=>{
                let list = res.data;
                if (page.num==1) {
                    this.tableList = list.data;
                } else {
                    this.tableList = this.tableList.concat(list.data);
                };
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.data.length);
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
        //排序
        sortTable(data){
            this.showLoading = true;
            this.mescrollUp.page.num = 1;
            // console.log(data)
            this.order = data.order;
            this.order_type = data.order_type;
            staffersV3({
                token:this.$store.state.token,
                staffer_id:this.$store.state.staffer_id,
                staffer_name: this.searchValue,
                sort:this.order_type,
                organic_sonid:this.organize_id,
                status:this.filterValue,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.mescroll.scrollTo( 0, 10 );
                    this.mescroll.endSuccess(list.data.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //组织过滤
        organizationNavs(data){
            this.showLoading = true;
            data.value?this.organize_id = data.value:this.organize_id = '0';
            this.mescrollUp.page.num = 1;
            staffersV3({
                token:this.$store.state.token,
                staffer_id:this.$store.state.staffer_id,
                staffer_name: this.searchValue,
                sort:this.order_type,
                organic_sonid:this.organize_id,
                status:this.filterValue,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.mescroll.scrollTo( 0, 10 );
                    this.mescroll.endSuccess(list.data.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //搜索关键字
        searchData(val){
            this.showLoading = true;
            this.searchValue = val;
            this.mescrollUp.page.num = 1;
            staffersV3({
                token:this.$store.state.token,
                staffer_id:this.$store.state.staffer_id,
                staffer_name: this.searchValue,
                sort:this.order_type,
                organic_sonid:this.organize_id,
                status:this.filterValue,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.mescroll.scrollTo( 0, 10 );
                    this.mescroll.endSuccess(list.data.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //状态过滤
        changeItem(value){
            console.log(value)
            this.filterValue = value;
            this.showLoading = true;
            this.mescrollUp.page.num = 1;
            staffersV3({
                token:this.$store.state.token,
                staffer_id:this.$store.state.staffer_id,
                staffer_name: this.searchValue,
                sort:this.order_type,
                organic_sonid:this.organize_id,
                status:this.filterValue,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.mescroll.scrollTo( 0, 10 );
                    this.mescroll.endSuccess(list.data.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //进入个人绩效结果页面
        subordinatesInfo(id) {
            this.$router.push({ name: "subordinatesInfoDelay", query: {staffer_id:id}});
        },
        //更新组织名
        updateTitle(data){
            this.title = data;
        }
    },

    //我们需要在当页的钩子函数中，加上操作
    beforeRouteEnter(to,from,next){
        if(from.path !== '/subordinatesInfoDelay'){//不是从subordinatesInfoDelay页面过来的，需要刷新
            to.meta.isFresh = true;
        }
        localStorage.setItem('page',from.name);
        next()
    },
    beforeRouteLeave(to,from,next){
        if(to.path==='/subordinatesInfoDelay'){
            from.meta.scrollTop = document.documentElement.scrollTop||document.body.scrollTop || this.mescroll.getScrollTop();
        }else {//不去详情页面时，将缓存的tableList数组清空
            this.tableList = [];
        }
        next()
    },
    // beforeRouteLeave (to, from, next) {
    //     // console.log(this.mescrollUp.onScroll())
    //     console.log(this.mescroll.getScrollTop())
    //     let position = this.mescroll.getScrollTop();
    //     localStorage.setItem('scrollTop',position);
    //     if (to.name == 'subordinatesInfoDelay') {
    //         if (!from.meta.keepAlive) {
    //             from.meta.keepAlive = true;
    //         };
    //         next();
    //     } else {
    //         from.meta.keepAlive = false;
    //         to.meta.keepAlive = false;
    //         next();
    //         window.location.reload();
    //     }
    //     // console.log(to)
    //     // if (to.name == "sevenDelay") {
    //     //     from.meta.keepAlive = false;
    //     // } else {
    //     //     from.meta.keepAlive = true;
    //     // }
    //     // next();
    // }
}
</script>
<style lang="less" scoped>
/deep/ [class*=van-hairline]::after{border:none;}
.top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
.filter-tool{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
    div,p{flex: 1;}
    p{text-align: right;}
    /deep/ .van-dropdown-menu{height: 44px;}
    /deep/ .van-dropdown-menu__bar{height: 44px;background: none;box-shadow: none;}
    /deep/.van-dropdown-menu__item{flex: auto;justify-content: flex-start;}
    /deep/.van-dropdown-menu__title{padding-left: 0;font-size: 12px;}
}
.van_item {
    width: 100%;
    height: 68px;
    border-bottom: 2px solid #f7f7f7;
    .item_list {
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
      .item_list_item {
        width: 100%;
        height: auto;
        flex: 1;
        .item_user_info {
          display: flex;
          align-items: center;
          div {
            max-width: 85px;
            line-height: 20px;
            margin-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          img {
            width: 28px;
            height: 28px;
            border-radius: 28px;
          }
        }
        .cycle_status_desc {
          // max-width: 1rem;
          display: inline-block;
        }
      }
      .warning{color: #ff4066}
      .first_item_list_item {
        flex: 2;
        text-align: left;
      }
    }
  }
/*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 88px;
    bottom: 0;
    height: auto;
    background: #fff;
  }
</style>